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RELATED APPLICATIONS 

[0001] The present application is related to commonly owned and assigned application 

nos.: 

GIST-OOl/OOUS, entitled, System and Method for Generating Customized EPG 
Data and EPG Application Programs^ 

GIST-002/00US, entitled Method and System for Separating Static and Dynamic 
Data; and 

GIST-004/00US,entitled Method and System for Presentation of Pre-Generated 
Programming Information^ which are incorporated herein by reference. 

COPYRIGHT 

[0002] A portion of the disclosure of this patent document contains material that is 
subject to copyright protection. The copyright owner has no objection to the facsimile 
reproduction by anyone of the patent disclosure, as it appears in the Patent and 
Trademark Office patent files or records, but otherwise reserves all copyright rights 
whatsoever. 

FIELD OF THE INVENTION 

[0003] The present invention relates to the optimal alignment of programming 
information using a grid. 
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BACKGROUND OF THE INVENTION 

[0004] In recent years, entertainment program viewers have been provided with 
increasing numbers of viewing choices. For example, several cable television ("CATV") 
providers now offer more than 100 himdred channels of programming to their 
subscribers. Digital cable television providers offer more than 200 channels, and satellite 
television providers offer over 500 channels to their subscribers. The Intemet and the 
increasing availability of broadband communications have introduced the availability of a 
practically unlimited number of sources of streaming- video and audio, representing an 
almost limitless diversity of content, from drama to sporting events to documentaries. 
Viewers can receive programming information via traditional print media or, for 
example, electronic programming guides that may be provided by a program provider 
directly through a television ("TV") or a set-top box (e.g., an HTTP/HTML web browser 
that enables a TV to become a user interface to the Intemet). 

[0005] A problem often encountered with conventional approaches to displaying 
programming information to viewers (e.g., via electronic program guides or Intemet 
programming guides) relates to displaying the grid format in a clear, concise, and 
efficient manner using browsers available at the client, e.g., browsers available at the set- 
top box. For example, programming hstings grids using web browsers may often appear 
with irregular (i.e., disproportionate) spacing per unit of time. In some cases, the browser 
software automatically formats the table based on the lengths of the text within the cells. 
For example, if a program title is short, such as "ER," then by using conventional 
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approaches the corresponding grid space may be reformatted during presentation to the 
viewer to occupy less horizontal space than originally desired for the program title. As a 
result, programming information in a cell grid can get shifted with respect to its 
corresponding time information listed in the margin above. The horizontal space 
occupied by a program title of the grid cells, however, should be visually relative to the 
other grid cells and the time duration. Moreover, when no displayed programs begin on a 
certain time increment in the margm, skipped in the grid. 

[0006] A specific example of a programming grid constructed according to a 
conventional approach is depicted in FIG. 1. In this figure, display screen 100, a Web 
browser window, presents programming grid 1 10 to a viewer. Programming grid 110 
includes chaimel column 120 and programming information rows 130. Chaimel column 
120 lists the name of a TV channel on each row, and programming information rows 130 
display the programs scheduled to air on those channels. Time row 140 attempts to show 
the viewer what time a program is scheduled to air, but all program blocks do not line up 
correctly with time row 140. 

[0007] For instance, time row 140 depicts a first time period of 12:00 a.m.-12:30 a.m. 
and a second time period of 12:30 a.m.-l :00 a.m. ("OOhOO" and "00h30" represent 
midnight and 12:30 a.m., respectively, in 24-hr time notation.) The left arrowhead on 
time row 140 next to "OOhOO" actually represents the first five minutes of the first time 
period, and the right arrowhead at the right end of time row 140 represents the last five 
minutes of the second time period. 
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[0008] However, based on the alignment of time row 140 in programming grid 1 10, it 
appears that the first time period is longer than the second, even though both represent 30 
minute intervals. Also, based on the ahgnment of the program blocks with respect to 
time row 140, it appears that the third program on channel "FRANCE T (represented by 
the ellipsis to the right of the "Journal de . . program block) is longer than the "Joumal 
de . . program and starts around 12:15 a.m., wherein the third program actually is five 
minutes shorter than the "Joiimal de ..." program and starts at 12:20 a.m. 

[0009] Accordingly, there is a need in the art for a system and method that displays 
programming information to viewers in a clear, concise, and eflScient manner with 
proportional width per unit of time. 

[0010] Although present devices are functional, they are not sufficiently accurate or 
otherwise satisfactory. Accordingly, a system and method are needed to address the 
shortfalls of present technology and to provide other new and innovative features. 

SUMMARY OF THE INVENTION 

[0011] Exemplary embodiments of the present invention that are shown in the drawings 
are summarized below. These and other embodiments are more fully described in the 
Detailed Description section. It is to be understood, however, that there is no intention to 
limit the invention to the forms described in this Summary of the Livention or in the 
Detailed Description. One skilled in the art can recognize that there are numerous 
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modifications, equivalents and alternative constructions that fall within the spirit and 
scope of the invention as expressed in the claims. 

[0012] The present invention is generally directed to a method and system for presenting 
a programming grid with proportional width per unit time in a clear, concise, and 
efficient manner. One embodiment the invention can automatically optimize the display 
screen to provide a proportionally-spaced grid that displays programming information 
more clearly. The grid can maintain its formatting irrespective of the browser that is used 
to display the programming grid. 

[0013] In one embodiment, the invention provides the proportionally-spaced grid by 
creating a hidden reference row in an otherwise visible programming grid, dividing the 
reference row into a plurality of segments, each segment representing a time period, e.g., 
one minute, shorter than that of any program in the programming grid, and aligning in the 
programming grid the programming information of each program according to the 
segments of the reference row representing each program's respective time period. 

[0014] As previously stated, the above-described embodiments and implementations are 
for illustration purposes only. Numerous other embodiments, implementations, and 
details of the invention are easily recognized by those of skill in the art from the 
following descriptions and claims. 
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BRIEF DESCRIPTION OF THE DRAWINGS 

[0015] Various objects and advantages and a more complete understanding of the present 
invention are apparent and more readily appreciated by reference to the following 
Detailed Description and to the appended claims when taken in conjunction with the 
accompanying Drawings wherein: 

FIG. 1 is a screen shot that depicts a programming grid according to a 
conventional approach to displaying programming information; 

FIG. 2 is a block diagram that depicts a network architecture in accordance with 
an embodiment of the present invention; 

FIG. 3 is flow chart that illustrates a process for presenting a programming grid 
with regular spacing per unit time in accordance with an embodiment of the present 
invention; 

FIG. 4 is a screen shot that depicts a programming grid in accordance with an 
embodiment of the present invention; and 

FIG. 5 is a screen shot that depicts a programming grid in accordance with an 
embodiment of the present invention. 

DETAILED DESCRIPTION 

[0016] Referring now to the drawings, where like or similar elements are designated with 
identical reference numerals throughout the several views, and referring in particular to 
FIGURE 2, it illustrates a network architecture in accordance with one embodiment of 
the present invention. Television 201 is coupled to set-top box cUent 202 (possible an 
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HTTP/HTML web browser client application), which in turn is coupled to program 
listings server 203 through network 204. Other embodiments of the present invention 
include a personal computer with a browser. 

[0017] Program Ustings server 203 includes server processor 205 coupled to server 
memory 206. Server processor 205 can include, among others, a general purpose 
microprocessor, or an Application Specific Integrated Circuit ("ASIC") that embodies at 
least a part of the method in accordance with an embodiment of the present invention in 
its hardware and/or firmware. Likewise, server processor 205 can also be a combination 
of microprocessors and/or ASICs. 

[0018] Server memory 206 can be any device adapted to store electronic information, 
such as Random Access Memory, Read Only Memory, a hard disk, a Compact Disk Read 
Only Memory (CD-ROM), etc. At least part of server memory 206 should be writeable 
as well as readable. Server memory 206 may store program information display 
instructions 210 (software) and program listings information 212 that can be downloaded 
through network 204 to set-top box cUent 202. Program information display instructions 
210 may include HTML code with embedded Javascript, or any other interpreted 
language code, for rendering program listings information 212. 

[0019] Television 201 is viewed by a viewer. Television 201 is an example of a display 
device on which programs and programming information can be displayed to the viewer. 
Additional examples of display devices include a computer monitor, a display on a 



167230 vl/BD 
3Ll@01!.DOC 
013102/1534 



7. 



COOLEY GODWARD LLP 

Attorney Docket No. : GIST-003/00US 
ClientNo.: 301018-2003 

handheld device such as a PDA, cell phone, or remote control, a heads-up display, a 
projection display, etc. 

[0020] Set-top box cUent 202 includes a client processor 208 coupled to cHent memory 
209. As with server processor 205, cUent processor 208 cm include, among others, a 
general purpose microprocessor or an ASIC that embodies at least a part of the method in 
accordance with an embodiment of the present invention in its hardware and/or fimiware. 
Likewise, client processor 208 can be a combination of microprocessors and/or ASICs. 

[0021] CUent memory 209, like server memory 206, can be any device adapted to store 
electronic information, such as Random Access Memory, Read Only Memory, a hard 
disk, a Compact Disk Read Only Memory (CD-ROM), etc. At least part of client 
memory 209 should be writeable as well as readable. Client memory 209 may store 
rendering software 21 1 adapted to be executed by client processor 208, along with 
program information display instructions 210 and program listings information 212 that 
may be downloaded from program Ustings server 203. Rendering software 21 1 may 
render program Ustings information 212 in accordance with program information display 
instructions 210. 

[0022J Rendering software 21 1 can also be interactive, and receive and process input 
from the viewer {e,g,, from a television remote control, a keyboard, a mouse, a handheld 
wireless device, etc.) Rendering software 211 may share the functions of weU-known 
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browser software, such as Internet Explorer or can be an interpreted-language engine, 
such as a Javascript engine. 

[0023] Network 204 can be any network and/or system of networks. Examples of 
network 204 include the Internet, a wireless network, the Pubhc Switched Telephone 
Network ("PSTN"), a Local Area Network ("LAN"), a Wide Area Network ("WAN"), 
wkeless network, infra-red-based network, ultrasonic network, WAP-based network, 
CDMA 2000-based network, W-CDMA-based network, etc. 

[0024] FIG. 3 illustrates a process for displaying a programming grid with proportional 
spacing per unit time in accordance with an embodiment of the present invention, with 
FIGS, 4 and 5 illustrating exemplary display screens of the resulting programming grids. 
According to this process, program information display instructions 210 create a hidden 
reference row in the programming grid (step 310), md then divide the reference row into 
small time period segments (step 320). In one embodiment, each time period segment is 
shorter than that of any program in the programming grid. Next, program information 
display instructions 210 align the programming information in the grid according to the 
segments representing each program's respective time period (step 330). If necessary, 
program titles can be removed, abbreviated, truncated, and/or replaced by an image to 
guarantee that the grid cells are proportional to the deviation of the related show. Other 
information can also be displayed in the proportionally-spaced grid cells. For example, 
episode name, description, genre, HTML links, images and other objects can be sized and 
displayed in the grid cell. 
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[0025] In other embodiments, the present invention can use hidden images to generate a 
programming grid with proportional spacing per unit of time. For example, a hidden 
image with a fixed width can be added to a hidden row included in the grid. This hidden 
image would help the browser size the individual grid cells. For example, the image 
<IMG Border-0 SRC-empty. gifWIDTH=30> fixes the width for 30 minutes or some 
multiple thereof. In this embodiment, the grid width would be measured in pixels. In 
another embodiment, hidden images are inserted at the top or bottom of each grid cell. A 
hidden row is not necessarily needed. In yet another embodiment, cells include full 
images of title, start time, etc., with proper width. For example, the listing information 
for the show "Friends" could be transcoded into an image <IMG 
SRC=Friends20010305.gif WIDTH=30> and inserted into a grid cell. 

[0026] FIG. 4 illustrates display screen 400, a Web browser window, which presents 
programming grid 410 to a viewer. Programming grid 410 includes chaimel column 420 
and programming information rows 430. Channel colmnn 420 hsts the name of a TV 
channel on each row, and programming information rows 430 display the programs 
scheduled to air on those channels. Time row 440 accurately shows the viewer what time 
a program is scheduled to air, because all program blocks line up coixectly with time row 
440, unlike those in FIG. 1 . Popup window 450 appears with detailed program 
information as the viewer positions the input device over the corresponding program. 

[0027] FIG. 5, like FIG. 4, illustrates display screen 500, a Web browser window, which 
presents programming grid 510 to a viewer. Programming grid 510 includes channel 
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column 520 and programming information rows 530. Channel column 520 lists the name 
of a TV channel on each row, and programming information rows 530 display the 
programs scheduled to air on those channels. Time row 540 accurately shows the viewer 
what time a program is scheduled to air, because all program blocks line up correctly 
with time row 540, unlike those in FIG. 1 . Pop-up window 550 appears with detailed 
program information as the viewer selects a program with the input device. FIG. 5 
additionally includes reference row 560, which is invisible in the embodiment shown in 
FIG. 4. 



[0028] The following HTML code illustrates part of the low-level implementation of 
programming grid 410: 

I <TABLE bordeT=0 cellpadding=0 cellspacing=0 wid1h=^l 00% align=center> 
2 

3 <!- Invisible Reference Row -> 

4 <!— One cell per minute. One hoxir grid width, so 60 cells —> 

5 <rR> 

6 <TD width=l 32 height=Ox/TD> 

7 <TD width=9 height=0 colspan-lx/TD> 

8 , <TD width-9 height=0 colspan=lx/TD> 

9 <rD width=9 height=0 colspan-lx/TD> 

10 ... a total of60 such rows. . . 

I I <TD width=9 height=0 colspan=lx/TD> 

12 <TD width=9 height=0 colspan=lx/TD> 

13 </TR> 
14 

15 <!- Time Row -> 

16 <TR> 

1 7 <TD height=26 width=l 32 align=left vaUgn=top> 

18   

19 </TD> 

20 <TD height=26 colspaii=5 align=left valign=top> 

21 <IMG src=/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 vspace=0 

22 aUgn==absmiddle> 
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23 <A href="/soc3/partners/tak/grid.jsp?startdate=7/3 l/2000&starttime 

24 =llpm"> 

25 <IMG src='Vsoc3/partners/tak/iniages/leftarrow.gif ' border=0> 

26 </A> 

27 <JTD> 

28 <TD height=26 colspaii=25 align=lefl valign=top> 

29 <IMG src=/soc3/partners/tak/images/einpty.gif height==26 width=l hspace=0 

30 vspace=0 align=absmiddle> 

31 OOhOO 

32 </TD> 

33 <TD height=26 coIspan=25 align=left valign==top> 

34 <IMG src==/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 

35 vspace=0 align=absmiddle> 

36 00h30 

37 </TD> 

38 <TD height=26 colspan=5 align=left valign=top> 

39 <IMG src=/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 
y 40 vspace=0 align==absmiddle> 

y 41 <A href^7soc3/partners/tak/grid jsp?startdate=8/l/2000&stai«m^ 

H 42 =lam"> 

1^ 43 <IMG src=*Vsoc3/partners/taMmages/rightarrow.gif border=0> 

I 44 </A> 

M 45 <TD> 

46 <yTR> 
Q 47 

H; 48 <!- A Program Row (i.e., "France 2'* chaimel) -> 

W 49 <!- If the duration of a program is x minutes, its "colspan" attribute will 

^ 50 be equal to x — > 

y 51 <TR> 

" ^ 52 <TD width=132 height=26 align=left valign=top> 

53  FRANCE 2 

54 </TD> 

55 <TD height=26 colspan=5 align=lefl valign==top > 

56 <IMG src=/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 

57 vspace=0 align=absmiddle> 

58 <A href^"/soc3/partners/tak/programme.jsp?pid=77561 8&d=5" 

59 onMuseOver-"updateTip("CLIP DE LA MUSIQUE\n\Nfrance 

60 2\tiCLIPS\n01/08\n23h55-00h05 (Ohl0)")" 

61 onMouseOut="updateTip("")" 

62 target=_top> 

63 <IMG src=/soc3/partners/tak/images/empty.gif height=0 width=7 

64 hspace=0 vspace=0 align=absmiddle> 

65 <IMG src=/soc3/partners/tak/images/dot.gif width=28 height=26 

66 border=0 hspace=0 vspace=0 > 
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67 <IMG src=/soc3/partners/tak/images/empty.gif height=0 width=7 

68 hspace=0 vspace=0 align=absmiddle> 

69 </A> 

70 </TD> 

71 <TD lieight=26 colspan=15 align==lefl valign=top > 

72 <IMG src=/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 

73 vspace=0 align=absmiddle> 

74 <A hrei^7soc3/partners/tak/programme.jsp?pid=775619&d=15" 

75 oiiMouseOver="updateTip(" JOURNAL DE LA NUIT\n\nFRANCE 

76 2/iilNFORMATION\n01/08\ti00h05-00h20 (Ohl5)")" 

77 onMouseOut="updateTip("")" 

78 target=_top> 

79 <LIMITTEXT width=" 120" value=" Journal de la nuit"> 

80 </A> 

81 </TD> 

82 <TD height=26 colspan=10 align=Ieft valign=top > 

83 <IMG src=/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 

84 vspac^O align=absmiddle> 

85 <A href^7soc3/partners/tak/prograimne.jsp?pid=775620&d=10" 

86 anMouseOver="updateTip(&quotpV[ETEO 2\ii\nFRANCE 2\n\n0 l/08\n001i20 

87 001i30(0hl0)")" 

88 onMouseOut="updateTip("")" 

89 target=_top> 

90 <IMG src=/soc3/partners/tak/images/empty.gif height=0 width=30 

91 hspace=0 vspace=0 align=absmiddle> 

92 <IMG a:c=/soc3/partners/tak/images/dot.gif width=28 heigh1=26 

93 border=0 hspace=0 vspace=0 > 

94 <IMG src=/soc3/partners/tak/iinages/empty.gif height=0 width=30 

95 hspace=0 vspace=0 align=absmiddle> 

96 </A> 

97 <VTD> 

98 <TD height=26 colspan=30 align=left valign=top > 

99 <IMG src=/soc3/partners/tak/images/empty.gif height=26 width=l hspace=0 

100 vspace=0 align=absmiddle> 

1 01 <A href="/soc3/partners/tak/prograiiime.jsp?pid=775621 &d=30" 

102 onMouseOver="updateTip("MUSIQUE AU COEUR DE L'ETE\n\nFRANCE 

103 2\nMAGAZINE/MUSICAL\n01/08\n00h30-01h30 (lhOO)")" 

1 04 onMouseOut="updateTip("")" 

105 targetF=_top> 

1 06 <LIMITTEXT width="240" value=" Musique au coeur de rete"> 

107 </A> 

108 </TD> 

109 </TR> 

110 ... 
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111 </TABLE> 

[0029] The HTML code above defines a table (lines 1-1 1 1), which includes an invisible 
reference row (lines 3-13), a time row (lines 15-46), and a program row (lines 48-109). 
The table is rendered as programming grid 410, the reference row is invisible (i.e., 
height=0), the time row is rendered as time row 440, and the program row is rendered as 
the 'TRANCE 2" channel, or row, in programming grid 410. Step 3 10 of the 
embodiment of FIG. 4 is implemented by the creation of the reference row, step 320 is 
implemented by the structure of the reference row, and step 330 is implemented by the 
formatting of the time row and program row. 

[0030] The creation and structure of the reference row divides the table into 60 evenly- 
spaced segments, or columns — each colimm representing one minute. Each column, 9 
pixels wide (due to the 'Svidth" attribute"), represents one minute, hence the total of 60 
row elements (see lines 7-12). In other embodiments, the proportional width can be 
displayed in multiple or fractional increments such as 2 minutes=l pixel/column or 
1 minute=3 pixels/columns. (The 60 elements do not cover the portion of time row 440 
spaimed by channel column 420.) As in FIG. 1, time row 440 depicts a first time period 
of 12:00 a.m.-12:30 a.m. and a second time period of 12:30 a.m."l:00 a.m. ("OOhOO" and 
"00h30" represent midnight and 12:30 a.m., respectively, in 24-hr time notation.) The 
left arrowhead on time row 440 next to "OOhOO" actually represents the first five minutes 
of the first time period, and the right arrowhead at the right end of time row 440 
represents the last five minutes of the second time period. Unlike FIG. 1, the programs in 
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FIG. 4 are properly aligned with time row 440 due to the formatting of the time row and 
program row. 

[0031] The formatting of the time row and program row in FIG. 4 occurs by setting the 
appropriate "colspan" attribute for each table cell. In HTML, the "colspan" attribute of a 
table cell specifies the number of columns spanned by that cell. Since each column 
represents one minute of programming information in programming grid 410, one need 
only set the "colspan" attribute to the niunber of minutes one wishes the cell to represent. 
For example, the setting (in bold) of "colspan=5" at line 20 shows that the left arrowhead 
cell in time row 440 represents the first five minutes of the first time period. Similarly, 
the setting (in bold) of "colspan=25" at line 28 shows that the cell containing "OOhOO" 
represents the remaining 25 minutes of the first time period. The same holds true for the 
"colspan" settings at lines 33 and 38 (which represent the time periods of the "00h30" 
cell and the right arrowhead cell, respectively). 

[0032] To continue the example for the "FRANCE 2" program row in programming grid 
410, the setting (in bold) of "colspan=5" at line 55 shows that the leftmost . program 
cell in the "FRANCE 2" program row represents the first five minutes of the first time 
period. This is confirmed by noting the programming information associated with this 
program at lines 59-60, which states that the program "CLIP DE LA MUSIQUE" runs 
fi-om 23h55 (11:55 p.m.) to 00h05 (12:05 a.m.). This information would be displayed in 
pop-up window /4/50 if the input device were positioned over that cell (via the 
onMouseOver attribute). 
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[0033] Similarly, the setting (in bold) of "colspan=15'' at line 71 shows that the "Journal 
de , . program cell in the "FRANCE program row represents the 1 5-minute long 
program "JOURNAL DE LA NUTT", which runs from 00h05 (12:05 a.m.) to 00h20 
(12:20 a.m.). This program information is found on lines 75-76, which is displayed in 
pop-up window 450 due to the positioning of the input device over the corresponding 
program cell (note the border around the program cell illustrating which program 
corresponds to the information in pop-up window 450). Note that the timing of the 
program aligns correctly with it's respective time period on time row 440. 

[0034] Thus, this embodiment of the present invention solves the alignment problems of 
FIG. 1 . For example, the two V2 hour time periods in time row 440 appear to be the same 
length, and the third program on the "FRANCE 2" channel, which is 10 minutes long 
(see lines 82 and 86-87), actually appears shorter than the 1 5-minute long "JOURNAL 
DE LA NUIT" program. Also, both appear correctly aligned with time row 440. 

[0035] The above HTML code would similarly illustrate those parts of the low-level 
implementation of programming grid 510, if the expressions "height=0" at lines 6-12 
were replaced with *lieight=26". This action would make the invisible reference row 
discussed above visible, as shown by reference row 560 in FIG. 5. 

[0036] Additionally, since the ' Vidth" attribute may not be well supported among all 
HTTP/HTML web browsers, one may in an altemative embodiment place a fixed-length 
image or characters in a table cell to force the width. For example, instead of: 
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<TD width=9 height=0 colspan=lx/TD> 
at lines 7-12, one may use: 

<TD colspan=lxlMG width-9 height-1 src-"empty.gif 'x/IMGx/TD> 

[0037] In conclusion, the present invention provides, among other things, a system and 
method for providing proportional alignment of information within a grid. Those skilled 
in the art can readily recognize that numerous variations and substitutions may be made 
in the invention, its use and its configuration to achieve substantially the same results as 
achieved by the embodiments described herein. Accordingly, there is no intention to 
limit the invention to the disclosed exemplary forms. Many variations, modifications and 
alternative constructions fall within the scope and spirit of the disclosed invention as 
expressed in the claims. 
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